<template>
<div :class="'bx-image '+( (showDelete && !nopic )?'hover-showdelete':'')" :style="'width:'+width+'px;height:'+height+'px'">
    <img :src="datasrc" :width="width" :height="height" @load="loadComplete($event)" @error="loadError($event)" />
     <span class="nopic" v-show="nopic">
         <i class="el-icon-picture-outline"></i>
     </span>
     <span class="delete"><el-button type="danger" icon="el-icon-delete" circle @click="deleteImage()"></el-button></span> 
     <div class="el-loading-spinner" v-show="loading"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg><!----></div>
</div>
</template>

<script>
/**
 * Bx图片展示
 */
export default {
  name: 'BxImage',
  props: {
    width: {
      type: Number,
      default: 80
    },
    height: {
      type: Number,
      default: 80
    },
    loading:{
        type:Boolean,
        default:false
    },
    src:{
        type:String,
        default:''
    },
    showDelete:{
        type:Boolean,
        default:true
    },
    index:{
        type:Number,
        default:0
    }
  },
  data() {
    return {
      nopic:false,
      datasrc:''
    }
  },
  
  watch:{
       src(val){
           this.datasrc=val;
           console.log("src change")
       }
  },
  mounted() {
    this.datasrc=this.src;
  },
  beforeDestroy() {
    
  },
  methods: {
    loadComplete($event){
        this.$emit("load-complete",{result:true,index:this.index})
        this.nopic=false;
    },
    loadError($event){
        this.nopic=true;
        this.$emit("load-complete",{result:false,index:this.index})
        console.log("loadError")
    },
    deleteImage(){
        this.datasrc='';
        this.$emit("delete-handler",this.index);
        console.log("deleteImage")
    },
    easeInOutQuad(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t + b
      return -c / 2 * (--t * (t - 2) - 1) + b
    }
  }
}
</script>

<style>

</style>
